<template>
  <div>
    <el-table
      :data="list"
      max-height="600"
      border
    >
    <template v-for="(item, $key, index) in headerList">
      <el-table-column :key="$key" :fixed="index < 5">
        <template slot="header">{{$key}}</template>
        <template slot-scope="{row}">{{row[$key]}}</template>
      </el-table-column>
    </template>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
    };
  },
  computed: {
    headerList() {
      return this.list[0] || [];
    },
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      fetch('http://localhost:3000/')
        .then(res => res.json())
        .then((res) => {
          this.list = res;
        });
    },
  },
};
</script>

<style scoped>
</style>
